<template>
    <div>
        <van-pull-refresh
            v-model="isLoading"
            success-text="刷新成功"
            @refresh="onRefresh"
            >
      <el-container height="700px" >

        
            

          <!-- //头部 -->
          <el-header height="70px">

            

              <i class="el-icon-map-location"></i>
              <el-select class="sel" v-model="address" placeholder="请选择" >
                  <el-option
                  v-for="a in addressList"
                  :key="a.id"
                  :value="a.address"
                  size="mini"
                  >
                  </el-option>
              </el-select> 
  
              <p></p>
  
              <el-row>               
                  <el-col>
                      <el-input  
                      size="medium"
                      placeholder="请输入内容" 
                      prefix-icon="el-icon-search"
                      clearable
                      disabled
                      @click.native="$router.push('sreach')"
                      ></el-input>
                  </el-col> 
              </el-row>
              
          </el-header>
  
          <!-- //身体 -->
        <el-main>
  
              <!-- 分类 -->
            <el-row>
                <div>
                    <el-col :span="6" v-for="type in typeList" :key="type.id">
                        <div class="demo-type" style="text-align: center;margin: 5px;">
                            <el-avatar :size="50">
                                <img :src="type.icon" @click="$router.push('type')"/>
                            </el-avatar>    
                        </div>
                        <div style="text-align: center;">
                             <span>{{ type.typename }}</span>
                        </div>
                    </el-col>        
                </div>
            </el-row>
  
              <p></p>
              
              <!-- 轮播图 -->
              <el-row>
                  <el-col>
                      <div class="block" style="height: 140px;width: 335px;">
                        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                            <van-swipe-item v-for="img in images" :key="img.id">
                                <img :src="img.imgUrl" width="100%" style="display:block" @click="$router.push({name:'rotograph',query:{id:img.id}})"/>
                            </van-swipe-item>
                        </van-swipe>
                      </div>
                  </el-col>
              </el-row>
  
              <p></p>
  
              <!-- 限时抢购，推荐，新品 -->
              <el-row>
                <el-col>
                    <div style="margin: 5px;">
                       <span @click="tagGoods2"><b>限时抢购</b></span>
                       <van-count-down :time="time">
                            <template #default="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down> 
                    </div>
                    
                    <el-row>
                        <el-col :span="6" v-for="(g, index) in flashSale" :key="g.id">
                       
                            <div class="demo-type" v-if="index < 4" style="text-align: center;margin: 5px;">
                                <el-avatar :size="50">
                                    <img :src="g.imgUrl" style="text-align: center;margin: 0px;" @click="$router.push({name:'goodsInformation',query:{id:g.id}})"/>
                                </el-avatar>    
                            </div>
                            <div v-if="index < 4"  style="text-align: center;">
                                <span style="color: red;">￥：{{ g.price }}</span>
                            </div>
                            
                        </el-col>
                    </el-row>

                    <div>
                        <el-divider></el-divider>
                    </div>
                    
                    <div style="margin: 5px;">
                       <span @click="tagGoods1"><b>新品尝鲜</b></span> 
                    </div>
                    <el-row>
                        <div>
                            <el-col :span="6" v-for="(g, index) in tasteNewProducts" :key="g.id">
                                <div class="demo-type" v-if="index < 4" style="text-align: center;margin: 5px;">
                                    <el-avatar :size="50">
                                        <img :src="g.imgUrl" style="text-align: center;margin: 0px;" @click="$router.push({name:'goodsInformation',query:{id:g.id}})"/>
                                    </el-avatar>    
                                </div>
                                <div v-if="index < 4" style="text-align: center;">
                                    <span style="color: red;">￥：{{ g.price }}</span>
                                </div>
                            </el-col>
                            
                        </div>
                    </el-row>
        
                    
                </el-col>
              </el-row>
              <p></p>
  
              <!-- 商品展示 -->
              <el-row>
                  
                  <el-col :span="8" style="text-align: center;" v-for="tag in tagList" :key="tag.id">
                      <el-button type="text" class="textBtn" @click="queryTagGoods(tag)">{{ tag.name }}</el-button>
                  </el-col>
                  
              </el-row>

              <p></p>

                <el-row :gutter="10">
                    <el-col :span="10" :offset="1" v-for="goods in goodsList" :key="goods.id">
                        <template>
                                    <div style="width: 165px; margin-left: -15px; margin-right: -5px;">
                                        
                                        <el-skeleton style="width: 165px" :loading="loading" animated>
                                        <template slot="template">
                                            <el-skeleton-item
                                            variant="image"
                                            style="width: 165px; height: 165px;"
                                            />
                                            <div style="padding: 14px;">
                                            <el-skeleton-item variant="h3" style="width: 50%;" />
                                            <div
                                                style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
                                            >
                                                <el-skeleton-item variant="text" style="margin-right: 16px;" />
                                                <el-skeleton-item variant="text" style="width: 30%;" />
                                            </div>
                                            </div>
                                        </template>
                                        <template>
                                            <el-card
                                            :body-style="{ padding: '0px', marginBottom: '1px' }"
                                            style="margin: 0px 7px -2px 6px;"
                                            >
                                            <img
                                                :src="goods.imgUrl" 
                                                style="height: 150px;"
                                                @click="$router.push({name:'goodsInformation',query:{id:goods.id}})"
                                            />
                                            <div style="padding: 14px;">
                                                <span>{{goods.name}}</span>
                                                <div class="bottom card-header">
                                                <span style="color: red;">￥：{{ goods.price }}</span>
                                                <br>
                                                <span>{{ goods.description }}</span>
                                                <!-- <br>
                                                <el-button type="text" class="button" @click="$router.push({name:'goodsInformation',query:{id:goods.id}})">商品详情</el-button> -->
                                                </div>
                                            </div>
                                            </el-card>
                                        </template>
                                        </el-skeleton>
                                    </div>
                                </template>
                    </el-col>
                </el-row>
  
              
              
          </el-main>
  
          <!-- //尾部 -->
          
      <el-footer>

            <!-- <div style="margin:-10px">
            
                <el-menu router mode="horizontal">
                <el-menu-item index="1" @click="$router.push('index')">首  页</el-menu-item>
                <el-menu-item index="2" @click="$router.push('type')"> 分  类</el-menu-item>    
                <el-menu-item index="3" @click="$router.push('carts')"> 购 物 车</el-menu-item>
                <el-menu-item index="4" @click="$router.push('my')"> 我  的</el-menu-item>
                </el-menu> 
            
            
            </div> -->


            </el-footer>
      </el-container>

    </van-pull-refresh>  
  
    </div>
  </template>
  
  <script>
import 'vant/lib/index.css'
import { CountDown, Swipe, SwipeItem, PullRefresh  } from 'vant';
  export default {
    components:{
        [CountDown.name]:CountDown,
        [Swipe.name]:Swipe,
        [SwipeItem.name]:SwipeItem,
        [PullRefresh.name]:PullRefresh,
        },
      data(){
          return{
              loading:false,
              item:0,
              show: false,
              addressList:[],
              address:'',
              goodsList:[],
              typeList:[],
              flashSale:[],  
              tasteNewProducts:[],
              tagList:[], 
              time:24 * 60 * 60 * 1000, 
              images:[
                {id:1,imgUrl:'http://192.168.0.102:9000/wnsximg/%E6%B4%BB%E5%8A%A81.jpg',},
                {id:2,imgUrl:'http://192.168.0.102:9000/wnsximg/%E6%B4%BB%E5%8A%A82.jpg',},
                {id:3,imgUrl:'http://192.168.0.102:9000/wnsximg/%E6%B4%BB%E5%8A%A83.jpg',},
              ],
              isLoading:false,
              
          }
      },
      methods:{


          onRefresh() {
            setTimeout(() => {
                
                this.isLoading = false;
                window.location.reload();
            }, 1000);
            },
  
          queryAddress(){
  
              // let jwt = localStorage.getItem('jwt')
              let phone = sessionStorage.getItem('phone')
              
              this.$axios.post('/api/app/address/queryAddressByPhone?phone='+phone)
                  .then(res=>{
                      console.log(res.data)
                      if(res.data.code == 200){
                          this.addressList = res.data.data
                      }
                  })
          },

          queryGoodsAll(){
  
            this.$axios.get('/api/app/goodsReception/queryGoodsAll')
                .then(res => {
                    console.log(res.data)
                    
                    if(res.data.code == 200){
                        this.goodsList = res.data.data;   
                    }
                })
        },

        queryType(){
        this.$axios.get('api/app/GoodsType/getGoodsType')
        .then(res=>{ 
          console.log(res.data)
          if(res.data.code == 200){
            this.typeList = res.data.data
          }
          
        })
      },
        
        tagGoods2(){
            this.$router.push({name:'tagPage',query:{tagId:2}})
        },
        queryFlashSale(){
            let tagId = 2;
            this.$axios.get('/api/app/goodsReception/queryGoodsByTagId?tagId='+tagId)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.flashSale = res.data.data
                    }
                })

            

        },

        tagGoods1(){
            this.$router.push({name:'tagPage',query:{tagId:1}})
        },
        queryTasteNewProducts(){
            let tagId = 1;
            this.$axios.get('/api/app/goodsReception/queryGoodsByTagId?tagId='+tagId)
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.tasteNewProducts = res.data.data
                    }
                })
        },

        queryTag(){

            this.$axios.get('/api/app/tag/queryAll')
                .then(res=>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.tagList = res.data.data
                    }
                })
        },

        queryTagGoods(val){
            let id = val.id;
            this.$axios.get('/api/app/goodsReception/queryGoodsByTagId?tagId='+id)
                .then(res =>{
                    console.log(res.data)
                    if(res.data.code == 200){
                        this.goodsList = res.data.data; 
                    }
                })
        }
  
      },
      created(){
          this.queryAddress();
          this.queryGoodsAll();
          this.queryType();
          this.queryFlashSale();
          this.queryTasteNewProducts();
          this.queryTag();
      }
  }
  </script>
  
  <style>
  .el-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
}
  .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }
  
    .el-carousel__item:nth-child(2n) {
       background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
       background-color: #d3dce6;
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
    .el-row{
      background-color: white;
      border-radius: 10px;
      
    }
    .textBtn{
      padding-left: 10px;
    }
    .el-icon-map-location{
      font-size: 20px;
      height: 20px;
      margin: 6px;
    }
    .sel{
      position:absolute;
      clip:rect(2px 90px 30px 2px);
      width:100px;
      height:10px;
      line-height:20px;
      font-size:20px;
      font-weight:bold;
    }
    .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0px 0px 0px;
}
.el-select .el-input__inner {
    cursor: pointer;
    padding-right: 35px;
    background-color: #efefef;
}
.el-avatar>img {
    margin: 0px 0px 0px -5px;
}
.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  </style>